<template>
	<view>
		<view class="input">
			<text class="iconfont icon-huatifuhao"></text>
			<input
				placeholder="请输入话题..."
				placeholder-style="color: #C0C4CC;"
				type="text"
				v-model="inputContent">
			<view @click="clickButtno('input')">插入</view>
		</view>
		
		
		<view class="tab Flex Bj-BeiJingSe" style="margin-bottom: 0;">
			<view class="for Flex" @click="clickTab(1)">
				<text :class="tab==1?'H3 H3-Line':'H3 H3-Line Zt-ZhanWeiSe'">推荐话题</text>
			</view>
			<view class="for Flex" @click="clickTab(2)">
				<text :class="tab==2?'H3 H3-Line':'H3 H3-Line Zt-ZhanWeiSe'">话题列表</text>
			</view>
		</view>
		
		<template v-if="tab==1">
			
			<view class="recommendation-list" v-if="recommendHashtag.length">
				<view
					@click="clickButtno('select',item)"
					v-for="item in recommendHashtag">
					{{item}}
				</view>
			</view>
			<template v-else>
				<public-loading></public-loading>
			</template>
		</template>
		<template v-if="tab==2">
			<template v-if="hashtagListNew.length">
				<!-- 热门话题推荐 -->
				<view style="margin: 25rpx 0 0 25rpx;font-weight: bold;">热门话题推荐</view>
				<view class="list-hashtag Flex">
					<view
						@click="clickButtno('select',item.hname)"
						class="for H3 H3-Line"
						v-for="item in hashtagList">{{item.hname}}({{item.postCount}})</view>
				</view>
				
				<!-- 最新话题推荐 -->
				<view style="margin: 50rpx 0 0 25rpx;font-weight: bold;">最新话题推荐</view>
				<view class="list-hashtag Flex">
					<view
						@click="clickButtno('select',item.hname)"
						class="for H3 H3-Line"
						v-for="item in hashtagListNew">{{item.hname}}({{item.postCount}})</view>
				</view>
			</template>
			<template v-else>
				<public-loading></public-loading>
			</template>
		</template>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:1,
				inputContent:"",
				hashtagList:[],
				hashtagListNew:[],
				recommendHashtag:[],
			}
		},
		onLoad(e) {
			if(e.uniqueId){
				this.uniqueId = e.uniqueId
			}else{
				this.uniqueId = "";
			}
			this.QingQiu_QuanJu();
		},
		methods: {
			QingQiu_QuanJu(){
				uni.request({
					url:this.$_Config() + "Config.json",
					success: (res) => {
						this.recommendHashtag = res.data.hashtagRecommend;
					}
				})
			},
			// 点击，插入
			clickButtno(e,hname){
				if(e == 'select'){
					uni.$emit('hashtag'+this.uniqueId,{msg:hname})
					uni.navigateBack()
				}
				if(e == 'input'){
					uni.$emit('hashtag'+this.uniqueId,{msg:this.inputContent})
					uni.navigateBack()
				}
			},
			clickTab(e){
				this.tab = e;
				if(e == 2){
					this.QingQiu_hashtagList();
				}
			},
			QingQiu_hashtagList(){
				uni.request({
					url:this.$_Url() + "/api/v2/hashtag/list",
					method:'GET',
					header:this.$_FresnsHeader(),
					data:{
						"orderType":"post",
						"whitelistKeys":"hid,hname,postCount"
					},
					success: (res) => {
						this.hashtagList = res.data.data.list;
					}
				})
				uni.request({
					url:this.$_Url() + "/api/v2/hashtag/list",
					method:'GET',
					header:this.$_FresnsHeader(),
					data:{
						"whitelistKeys":"hid,hname,postCount"
					},
					success: (res) => {
						this.hashtagListNew = res.data.data.list;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.tab{
	width: 500rpx;
	height: 80rpx;
	margin: 25rpx auto;
	border: 1rpx solid $BianKuangSe;
	border-radius: 100rpx;
	align-items: center;
	.for{
		width: 50%;
		align-items: center;
		justify-content: center;
	}
}
.list-hashtag{
	flex-wrap: wrap;
	.for{
		border: 1rpx solid $BianKuangSe;
		color: $ZhanWeiSe;
		background: #FFF;
		border-radius: 100rpx;
		margin: 15rpx 0 0 15rpx;
		padding: 15rpx 20rpx;
		font-size: 28rpx;
		line-height: 28rpx;
	}
	.for:nth-child(2){color: $LvSe;}
	.for:nth-child(4){color: $JuHuang;}
	.for:nth-child(6){color: $HongSe;}
	.for:nth-child(9){color: $LanSe;}
}
.recommendation-list{
	margin: 0 25rpx 25rpx 25rpx;
	display: flex;
	flex-wrap: wrap;
	view{
		font-size: 28rpx;
		line-height: 28rpx;
		border: 1rpx solid $BianKuangSe;
		margin: 25rpx 25rpx 0 0;
		padding: 15rpx 20rpx;
		border-radius: 100rpx;
	}
}
.input{
	border: 1rpx solid $BianKuangSe;
	margin: 25rpx 25rpx 0 25rpx;
	display: flex;
	height: 100rpx;
	overflow: hidden;
	text{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 100rpx;
		background: $BeiJingSe;
		font-size: 50rpx;
		line-height: 50rpx;
		flex-shrink: 0;
	}
	input{
		flex: 1;
		height: 100rpx;
		font-size: 35rpx;
		text-align: center;
	}
	view{
		display: flex;
		align-items: center;
		flex-shrink: 0;
		height: 100rpx;
		padding: 0 35rpx;
		background: $LanSe;
		color: #FFF;
	}
}
</style>
